<template>
	<view class="content">
		<view>
		    <view class="info-item">
		      <text>工单编号：</text>
		      <text>{{ userInfo.taskPlan.ticketNum }}</text>
		    </view>
		    <view class="info-item">
		      <text>班次：</text>
		      <text>{{ userInfo.taskPlan.sailings }}</text>
		    </view>
		    <view class="info-item">
		      <text>区队：</text>
		      <text>{{ userInfo.taskPlan.parentDeptName }}</text>
		    </view>
		    <view class="info-item">
		      <text>班组：</text>
		      <text>{{ userInfo.taskPlan.deptName }}</text>
		    </view>
		    <view class="info-item">
		      <text>班组长：</text>
		      <text>{{ userInfo.taskPlan.morName }}</text>
		    </view>
		    <view class="info-item">
		      <text>钻孔编号：</text>
		      <text>{{ userInfo.drillInf.borerId }}</text>
		    </view>
		    <view class="info-item">
		      <text>钻机编号：</text>
		      <text>{{ userInfo.borerInf.borerId }}</text>
		    </view>
		  </view>
		
		  <div class="divider"></div>
		  
		   <view class="container">
		      <uni-icons type="checkbox" size="24"></uni-icons>
		      <uni-title class="title" title="钻孔情况" type="h4"></uni-title>
		    </view>
			
			
	 <view>
	    <view class="info-item">
	      <text>钻孔编号：</text>
	      <text>{{ userInfo.drillInf.borerId }}</text>
	    </view>
	    <view class="info-item">
	      <text>钻机地点：</text>
	      <text>{{ userInfo.drillInf.borerLoc }}</text>
	    </view>
	    <view class="info-item">
	      <text>钻孔类型：</text>
	      <text>{{ userInfo.drillInf.borerType }}</text>
	    </view>
	    <view class="info-item">
	      <text>孔径（mm）：</text>
	      <text>{{ userInfo.drillInf.poreSize }}</text>
	    </view>
	    <view class="info-item">
	      <text>倾角（°）：</text>
	      <text>{{ userInfo.drillInf.brakeTorque }}</text>
	    </view>
	    <view class="info-item">
	      <text>方位角（°）：</text>
	      <text>{{ userInfo.drillInf.mainAngle }}</text>
	    </view>
	    <view class="info-item">
	      <text>开孔高度（m）：</text>
	      <text>{{ userInfo.drillInf.poreHigh }}</text>
	    </view>
	  </view>
		
		<uni-forms  ref="baseForm" :modelValue="baseFormData" >
		     <uni-forms-item label="人工计数" required>
		     		<uni-easyinput v-model="baseFormData.laborCount" placeholder="输入人工计数" />
		    </uni-forms-item>
			<uni-forms-item label="本班进尺(m)">
			 		<uni-easyinput v-model="baseFormData.classFootage" placeholder="输入进尺" />
			</uni-forms-item>
		    </uni-forms>
			
		<div class="divider"></div>
		
		<view class="container">
		   <uni-icons type="checkbox" size="24"></uni-icons>
		   <uni-title class="title" title="钻机情况" type="h4"></uni-title>
		 </view>
		
		 <view>
		    <view class="info-item">
		      <text>钻机编号：</text>
		      <text>{{ userInfo.borerInf.borerId }}</text>
		    </view>
		    <view class="info-item">
		      <text>钻机型号：</text>
		      <text>{{ userInfo.borerInf.borerNum }}</text>
		    </view>
		    <view class="info-item">
		      <text>钻机型式：</text>
		      <text>{{ userInfo.borerInf.borerType }}</text>
		    </view>
		  </view>
		
		<div class="divider"></div>
		
		<view class="container">
		   <uni-icons type="checkbox" size="24"></uni-icons>
		   <uni-title class="title" title="班组人员" type="h4"></uni-title>
		 </view>
		 
		 <button @click="people_select">选择成员</button>
		 
		 <!-- 表格 -->
		   <view v-if="showTable">
		       <uni-table >
		         <uni-tr>
		           <uni-th width="150" align="center">姓名</uni-th>
		           <uni-th align="center" >班组角色</uni-th>
		         </uni-tr>
		         <uni-tr v-for="(item, index) in selectedItems" :key="index">
		           <uni-td>
		             <view class="name">{{ item.nickName }}</view>
		           </uni-td>
		           <uni-td align="center" class="role">{{ item.postName }}</uni-td>
		         </uni-tr>
		       </uni-table>
		     </view>
		 
		 <div class="divider"></div>
		 
		 <view class="container">
		    <uni-icons type="checkbox" size="24"></uni-icons>
		    <uni-title class="title" title="其他情况" type="h4"></uni-title>
		  </view>
		  
		<view class="select-container">
		    <text class="select-label">钻孔见岩情况</text>
		    <uni-data-select
		      v-model="baseFormData.seeRock"
		      :localdata="range"
		      placeholder="请选择见岩情况"
		    ></uni-data-select>
		  </view>
			
		<uni-forms  ref="baseForm" :modelValue="baseFormData" >
		     <uni-forms-item label="钻孔注浆情况" required>
		     		<uni-easyinput v-model="baseFormData.groutingCondition" placeholder="请输入" />
		    </uni-forms-item>
		    </uni-forms>
		
		  <div class="divider"></div>
			<button @click="submitForm">提交</button>
	</view>
</template>

<style>
/* 标题 */
.header-container {
  display: flex;
  align-items: center;
}

.maxtitle {
  margin-left: 10px; /* 根据需要调整图标和标题之间的间距 */
  text-align: center;
}
/* 分割线 */
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
}
.container {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 10px; /* 添加适当的间距 */
  text-align: left;
}

.info-item {
  margin-bottom: 10px; /* 设置每个信息项之间的间距 */
}

.select-container {
  display: flex;
  align-items: center;
}

.select-label {
  margin-right: 10px;
}
</style>

<script>
	export default {
		
		data() {
			return {
				userInfo:{
					
				},
				 baseFormData:{
					 
				 },
				  value: '',
				 range: [
				         { value: 0, text: "全煤" },
				         { value: 1, text: "其他" },
				       ],
				rules:{
					number_human:[{
						required: true,
						errorMessage: '不能为空',
					}]
				},
				selectedItems: [],
				showTable: true,
				mem:[]
			}
		},
		 onLoad(e) {
			 let id = e.id;
			 this.ask=id;
		 },
		 created() {
			var token="eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjYxNWNiMTA2LWVlNDQtNDBjZC1iODQ0LTljYzRlZjE1Y2I5OCJ9.8BbKXjHW9PEFqCN1F4eadHjWfhf2V7zZGh6GGsELChOQXYJZlQB1uT8y7f_Dm7bqJSmAv_ZzLIsueB2q3QUeHw";
		 	
		 	uni.request({
		 		url:"/kyhs/task-inf-list?ticketNum="+this.ask,
		 		method:"post",
		 		header:{'Authorization': token}
		 	}).then(Response =>{
		 		this.userInfo=Response.data.data;
		 	})
		 },
		  mounted() {
		    // 在页面加载完成后请求后端数据
		    // this.fetchUserInfo()
		  },
		methods: {
			// 页面跳转
			people_select(){
				var pn=this.userInfo.taskPlan.parentDeptName;
				var cn=this.userInfo.taskPlan.deptName;
				uni.navigateTo({
					    url: './people?'+'pn='+pn+'&cn='+cn
					});
			},	
			submitForm(){
			console.log(this.baseFormData);
			var token="eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjYxNWNiMTA2LWVlNDQtNDBjZC1iODQ0LTljYzRlZjE1Y2I5OCJ9.8BbKXjHW9PEFqCN1F4eadHjWfhf2V7zZGh6GGsELChOQXYJZlQB1uT8y7f_Dm7bqJSmAv_ZzLIsueB2q3QUeHw";
			uni.request({
				url:"/kyhs/task-inf-list/save-user"+"?parentName="+this.userInfo.taskPlan.parentDeptName+"&deptName="+this.userInfo.taskPlan.deptName+"&taskId="+this.userInfo.taskPlan.id,
				method:"POST",
				header:{'Authorization': token},
				data:this.mem
			});
			uni.request({
				url:"/kyhs/accept-inf/save-accept-inf"+"?taskId="+this.userInfo.taskPlan.id,
				method:"POST",
				header:{'Authorization': token},
				data:this.baseFormData
			})
			uni.navigateTo({
				url: './over'
			});
			},
			
			otherFun(e){
				 this.selectedItems=[];
				 this.selectedItems=e;
				 this.mem=this.selectedItems.map(li =>(li.id));
				 console.log(this.mem);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
